<template>
  <div id="components-layout-demo-basic">
    <a-layout>
      <a-layout-content style="margin-top: 20px">
        <a-form-model
          id="frmMatchQuery"
          :layout="'inline'"
          :model="queryModel"
          ref="frmMatchQuery"
          style="margin: 25px 15px"
        >
          <a-form-item label="显示段成绩">
            <a-switch :checked="duanchengji" :checked-value="true" :unchecked-value="false" @change="switchHandler()" />
          </a-form-item>
          <!-- <a-form-model-item label="姓名">
            <a-input placeholder="请输入姓名" v-model="queryModel.name" />
          </a-form-model-item>
          <a-form-model-item label="组别">
            <a-input placeholder="请输入组别" v-model="queryModel.group" />
          </a-form-model-item>
          <a-form-model-item label="参赛编号" v-show="moreQueryConditionShow == true">
            <a-input placeholder="请输入参赛编号" v-model="queryModel.pcode" />
          </a-form-model-item>
          <a-form-model-item label="总成绩" v-show="moreQueryConditionShow == true">
            <a-input placeholder="请输入总成绩" v-model="queryModel.score" />
          </a-form-model-item>
          <a-form-model-item label="是否检录" style="" v-show="moreQueryConditionShow == true">
            <a-select v-model="queryModel.iscall" placeholder="是否检录">
              <a-select-option value="">不填</a-select-option>
              <a-select-option value="是">是</a-select-option>
              <a-select-option value="否">否</a-select-option>
            </a-select>
          </a-form-model-item>
          <a class="switchQuery" @click="switchMore()" v-show="moreQueryCondition == false"
            ><a-icon type="down" />展开</a
          >
          <a class="switchQuery" @click="switchMore()" v-show="moreQueryCondition == true"><a-icon type="up" />收起</a>
          <a-form-model-item>
            <a-button type="primary" @click="onSubmit"><a-icon type="search" />查询</a-button>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="resetForm"><a-icon type="reload" />重置</a-button>
          </a-form-model-item> -->
        </a-form-model>

        <a-table
          :columns="columns"
          :data-source="data"
          bordered
          :pagination="false"
          :scroll="duanchengji === false ? { y: tableHeight } : { x: 3100, y: tableHeight }"
        >
          <template slot="name" slot-scope="text">
            <a>{{ text ? text : '' }}</a>
          </template>
          <template slot="operation" slot-scope="text, record">
            <a @click="() => handlerRowClick(record, 'edit')">编辑</a>
            <a @click="() => handlerRowClick(record, 'details')" style="margin-left: 10px">详情</a>
          </template>
        </a-table>
      </a-layout-content>
    </a-layout>

    <a-modal
      :visible="modalShowEdit"
      :width="'80%'"
      title="选手信息"
      :okText="'保存'"
      @ok="(e) => onSubmitSave(e)"
      @cancel="() => setModalEditVisible(false)"
    >
      <a-form-model
        id="frmPlayerEdit"
        :model="PlayerModel"
        :layout="'horizontal'"
        v-bind="{
          labelCol: { span: 4 },
          wrapperCol: { span: 14 },
        }"
        ref="frmPlayerEdit"
      >
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="姓名">
              <a-input placeholder="请输入姓名" v-model="PlayerModel.player" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="组别">
              <a-input placeholder="请输入组别" v-model="PlayerModel.groupid" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="芯片号">
              <a-input placeholder="请输入芯片号" v-model="PlayerModel.ringcode" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="参赛编号">
              <a-input placeholder="请输入参赛编号" v-model="PlayerModel.pcode" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="开始时间">
              <a-date-picker valueFormat="YYYY-MM-DD HH:mm:ss" @change="onChangePicker" :show-time="true" />
              <!-- <a-input placeholder="请输入开始时间" v-model="PlayerModel.pstarttime" /> -->
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="总圈数">
              <a-input placeholder="请输入总圈数" v-model="PlayerModel.totalring" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="总成绩">
              <a-input placeholder="请输入总成绩" v-model="PlayerModel.score" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="净成绩">
              <a-input placeholder="请输入净成绩" v-model="PlayerModel.scorecj" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24" v-if="duanchengji === true">
          <a-col :span="12">
            <a-form-model-item label="段成绩1">
              <a-input placeholder="请输入段成绩1" v-model="PlayerModel.p1" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="段成绩2">
              <a-input placeholder="请输入段成绩2" v-model="PlayerModel.p2" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="duanchengji === true">
          <a-col :span="12">
            <a-form-model-item label="段成绩3">
              <a-input placeholder="请输入段成绩3" v-model="PlayerModel.p3" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="段成绩4">
              <a-input placeholder="请输入段成绩4" v-model="PlayerModel.p4" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="duanchengji === true">
          <a-col :span="12">
            <a-form-model-item label="段成绩5">
              <a-input placeholder="请输入段成绩5" v-model="PlayerModel.p5" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="段成绩6">
              <a-input placeholder="请输入段成绩6" v-model="PlayerModel.p6" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="duanchengji === true">
          <a-col :span="12">
            <a-form-model-item label="段成绩7">
              <a-input placeholder="请输入段成绩7" v-model="PlayerModel.p7" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="段成绩8">
              <a-input placeholder="请输入段成绩8" v-model="PlayerModel.p8" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="duanchengji === true">
          <a-col :span="12">
            <a-form-model-item label="段成绩9">
              <a-input placeholder="请输入段成绩9" v-model="PlayerModel.p9" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="段成绩10">
              <a-input placeholder="请输入段成绩10" v-model="PlayerModel.p10" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="duanchengji === true">
          <a-col :span="12">
            <a-form-model-item label="段成绩11">
              <a-input placeholder="请输入段成绩11" v-model="PlayerModel.p11" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="段成绩12">
              <a-input placeholder="请输入段成绩12" v-model="PlayerModel.p12" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="duanchengji === true">
          <a-col :span="12">
            <a-form-model-item label="段成绩13">
              <a-input placeholder="请输入段成绩13" v-model="PlayerModel.p13" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="段成绩14">
              <a-input placeholder="请输入段成绩14" v-model="PlayerModel.p14" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="duanchengji === true">
          <a-col :span="12">
            <a-form-model-item label="段成绩15">
              <a-input placeholder="请输入段成绩15" v-model="PlayerModel.p15" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="段成绩16">
              <a-input placeholder="请输入段成绩16" v-model="PlayerModel.p16" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="duanchengji === true">
          <a-col :span="12">
            <a-form-model-item label="段成绩17">
              <a-input placeholder="请输入段成绩17" v-model="PlayerModel.p17" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="段成绩18">
              <a-input placeholder="请输入段成绩18" v-model="PlayerModel.p18" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="duanchengji === true">
          <a-col :span="12">
            <a-form-model-item label="段成绩19">
              <a-input placeholder="请输入段成绩19" v-model="PlayerModel.p19" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="段成绩20">
              <a-input placeholder="请输入段成绩20" v-model="PlayerModel.p20" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="手机号">
              <a-input placeholder="请输入手机号" v-model="PlayerModel.phone" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="身份证号">
              <a-input placeholder="请输入身份证号" v-model="PlayerModel.idcard" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="团队">
              <a-input placeholder="请输入团队" v-model="PlayerModel.teams" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <!-- <a-form-model-item label="是否检录">
              <a-select v-model="PlayerModel.iscall" placeholder="是否检录">
                <a-select-option value="">不填</a-select-option>
                <a-select-option value="是">是</a-select-option>
                <a-select-option value="否">否</a-select-option>
              </a-select>
            </a-form-model-item> -->
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
    <a-modal :visible="modalShowDetails" title="选手信息" @cancel="() => setModalDetailsVisible(false)" :width="'80%'">
      <template slot="footer">
        <a-button type="primary" @click.stop="() => setModalDetailsVisible(false)">返回</a-button>
      </template>
      <a-form-model
        id="frmPlayerDetails"
        :model="PlayerModel"
        :layout="'horizontal'"
        v-bind="{
          labelCol: { span: 4 },
          wrapperCol: { span: 14 },
        }"
        ref="frmPlayerDetails"
      >
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="姓名">
              <a-input placeholder="" v-model="PlayerModel.player" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="组别">
              <a-input placeholder="" v-model="PlayerModel.groupid" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="芯片号">
              <a-input placeholder="" v-model="PlayerModel.ringcode" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="参赛编号">
              <a-input placeholder="" v-model="PlayerModel.pcode" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="开始时间">
              <a-input placeholder="" v-model="PlayerModel.pstarttime" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="总圈数">
              <a-input placeholder="" v-model="PlayerModel.totalring" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="总成绩">
              <a-input placeholder="" v-model="PlayerModel.score" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="净成绩">
              <a-input placeholder="" v-model="PlayerModel.scorecj" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="duanchengji === true">
          <a-col :span="12">
            <a-form-model-item label="段成绩1">
              <a-input placeholder="" v-model="PlayerModel.p1" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="段成绩2">
              <a-input placeholder="" v-model="PlayerModel.p2" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="duanchengji === true">
          <a-col :span="12">
            <a-form-model-item label="段成绩3">
              <a-input placeholder="" v-model="PlayerModel.p3" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="段成绩4">
              <a-input placeholder="" v-model="PlayerModel.p4" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="duanchengji === true">
          <a-col :span="12">
            <a-form-model-item label="段成绩5">
              <a-input placeholder="" v-model="PlayerModel.p5" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="段成绩6">
              <a-input placeholder="" v-model="PlayerModel.p6" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="duanchengji === true">
          <a-col :span="12">
            <a-form-model-item label="段成绩7">
              <a-input placeholder="" v-model="PlayerModel.p7" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="段成绩8">
              <a-input placeholder="" v-model="PlayerModel.p8" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="duanchengji === true">
          <a-col :span="12">
            <a-form-model-item label="段成绩9">
              <a-input placeholder="" v-model="PlayerModel.p9" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="段成绩10">
              <a-input placeholder="" v-model="PlayerModel.p10" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="duanchengji === true">
          <a-col :span="12">
            <a-form-model-item label="段成绩11">
              <a-input placeholder="" v-model="PlayerModel.p11" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="段成绩12">
              <a-input placeholder="" v-model="PlayerModel.p12" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="duanchengji === true">
          <a-col :span="12">
            <a-form-model-item label="段成绩13">
              <a-input placeholder="" v-model="PlayerModel.p13" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="段成绩14">
              <a-input placeholder="" v-model="PlayerModel.p14" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="duanchengji === true">
          <a-col :span="12">
            <a-form-model-item label="段成绩15">
              <a-input placeholder="" v-model="PlayerModel.p15" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="段成绩16">
              <a-input placeholder="" v-model="PlayerModel.p16" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="duanchengji === true">
          <a-col :span="12">
            <a-form-model-item label="段成绩17">
              <a-input placeholder="" v-model="PlayerModel.p17" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="段成绩18">
              <a-input placeholder="" v-model="PlayerModel.p18" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="duanchengji === true">
          <a-col :span="12">
            <a-form-model-item label="段成绩19">
              <a-input placeholder="" v-model="PlayerModel.p19" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="段成绩20">
              <a-input placeholder="" v-model="PlayerModel.p20" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="手机号">
              <a-input placeholder="" v-model="PlayerModel.phone" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="身份证号">
              <a-input placeholder="" v-model="PlayerModel.idcard" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="团队">
              <a-input placeholder="" v-model="PlayerModel.teams" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <!-- <a-form-model-item label="是否检录">
              <a-input placeholder="" v-model="PlayerModel.iscall" disabled/>
            </a-form-model-item> -->
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import store from '@/store/'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getAction } from '@/api/manage'
import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import { getRefPromise, VALIDATE_FAILED } from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'

export default {
  name: 'QueryPlayers',
  mixins: [JVxeTableModelMixin],
  components: {
    JFormContainer,
  },
  data() {
    return {
      duanchengji: false,
      tableHeight: 600,
      matchId: '',
      form: this.$form.createForm(this, { name: 'coordinated' }),
      emptyModel: { name: '', group: '', pcode: '', score: '', iscall: '' },
      queryModel: { name: '', group: '', pcode: '', score: '', iscall: '' },
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
      },
      moreQueryCondition: false,
      moreQueryConditionShow: false,
      data: [],
      data_origin: [],
      columns: [
        {
          title: '姓名',

          dataIndex: 'player',
          sorter: (a, b) => {
            if (!a.player) {
              return 9999999
            } else if (!b.player) {
              return 9999999
            } else {
              return a.player.localeCompare(b.player)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: '15%',
        },
        {
          title: '组别',

          dataIndex: 'groupid',
          sorter: (a, b) => {
            if (!a.groupid) {
              return 9999999
            } else if (!b.groupid) {
              return 9999999
            } else {
              return a.groupid.localeCompare(b.groupid)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: '10%',
          align: 'center',
        },
        // {
        //   title: '芯片号',

        //   dataIndex: 'ringcode',
        //   sorter: (a, b) => {
        //     if (!a.ringcode) {
        //       return 9999999
        //     } else if (!b.ringcode) {
        //       return 9999999
        //     } else {
        //       return a.ringcode.localeCompare(b.ringcode)
        //     }
        //   },
        //   sortDirections: ['descend', 'ascend'],
        //   dictCode: '',
        //   width: '14%',
        //   align: 'center',
        // },
        {
          title: '参赛编号',

          dataIndex: 'pcode',
          sorter: (a, b) => {
            if (!a.pcode) {
              return 9999999
            } else if (!b.pcode) {
              return 9999999
            } else {
              return a.pcode.localeCompare(b.pcode)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: '15%',
          align: 'center',
        },
        {
          title: '开始时间',

          dataIndex: 'pstarttime',
          sorter: (a, b) => {
            if (!a.pstarttime) {
              return 9999999
            } else if (!b.pstarttime) {
              return 9999999
            } else {
              return a.pstarttime.localeCompare(b.pstarttime)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: '12%',
          align: 'center',
        },
        {
          title: '总圈数',

          dataIndex: 'totalring',
          sorter: (a, b) => {
            if (!a.totalring) {
              return 9999999
            } else if (!b.totalring) {
              return 9999999
            } else {
              return a.totalring.localeCompare(b.totalring)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: '10%',
          align: 'center',
        },
        {
          title: '总成绩',

          dataIndex: 'score',
          defaultSortOrder: 'ascend',
          sorter: (a, b) => {
            if (!a.score) {
              return 9999999
            } else if (!b.score) {
              return 9999999
            } else {
              return a.score.localeCompare(b.score)
            }
          },

          sortDirections: ['descend', 'ascend'],
          width: '10%',
          align: 'center',
        },
        {
          title: '净成绩',
          dataIndex: 'scorecj',
          sorter: (a, b) => {
            if (!a.scorecj) {
              return 9999999
            } else if (!b.scorecj) {
              return 9999999
            } else {
              return a.scorecj.localeCompare(b.scorecj)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: '10%',
          align: 'center',
        },
        // {
        //   title: '手机号',
        //   dataIndex: 'phone',
        //   // sorter: (a, b) => a.phone.localeCompare(b.phone),
        //   // sortDirections: ['descend', 'ascend'],
        //   width: '10%',
        //   align: 'center',
        // },
        // {
        //   title: '身份证号',
        //   dataIndex: 'idcard',
        //   // sorter: (a, b) => a.idcard.localeCompare(b.idcard),
        //   // sortDirections: ['descend', 'ascend'],
        //   width: '10%',
        //   align: 'center',
        // },
        {
          title: '团队',
          dataIndex: 'teams',
          align: 'center',
          // sorter: (a, b) => a.teams.localeCompare(b.teams),
          // sortDirections: ['descend', 'ascend'],
        },
        // {
        //   title: '是否检录',
        //   dataIndex: 'iscall',
        //   sorter: (a, b) => a.iscall.localeCompare(b.iscall),
        //   sortDirections: ['descend', 'ascend'],
        //   width: '5%',
        //   // placeholder: '请输入${title}',
        //   // defaultValue: '',
        // },
        {
          title: '操作',
          key: 'operation',
          fixed: 'right',
          width: 100,
          scopedSlots: { customRender: 'operation' },
        },
      ],
      columns1: [
        {
          title: '姓名',

          dataIndex: 'player',
          sorter: (a, b) => {
            if (!a.player) {
              return 9999999
            } else if (!b.player) {
              return 9999999
            } else {
              return a.player.localeCompare(b.player)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: '15%',
        },
        {
          title: '组别',

          dataIndex: 'groupid',
          sorter: (a, b) => {
            if (!a.groupid) {
              return 9999999
            } else if (!b.groupid) {
              return 9999999
            } else {
              return a.groupid.localeCompare(b.groupid)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: '10%',
          align: 'center',
        },
        // {
        //   title: '芯片号',

        //   dataIndex: 'ringcode',
        //   sorter: (a, b) => {
        //     if (!a.ringcode) {
        //       return 9999999
        //     } else if (!b.ringcode) {
        //       return 9999999
        //     } else {
        //       return a.ringcode.localeCompare(b.ringcode)
        //     }
        //   },
        //   sortDirections: ['descend', 'ascend'],
        //   dictCode: '',
        //   width: '14%',
        //   align: 'center',
        // },
        {
          title: '参赛编号',

          dataIndex: 'pcode',
          sorter: (a, b) => {
            if (!a.pcode) {
              return 9999999
            } else if (!b.pcode) {
              return 9999999
            } else {
              return a.pcode.localeCompare(b.pcode)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: '15%',
          align: 'center',
        },
        {
          title: '开始时间',

          dataIndex: 'pstarttime',
          sorter: (a, b) => {
            if (!a.pstarttime) {
              return 9999999
            } else if (!b.pstarttime) {
              return 9999999
            } else {
              return a.pstarttime.localeCompare(b.pstarttime)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: '12%',
          align: 'center',
        },
        {
          title: '总圈数',

          dataIndex: 'totalring',
          sorter: (a, b) => {
            if (!a.totalring) {
              return 9999999
            } else if (!b.totalring) {
              return 9999999
            } else {
              return a.totalring.localeCompare(b.totalring)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: '10%',
          align: 'center',
        },
        {
          title: '总成绩',

          dataIndex: 'score',
          defaultSortOrder: 'ascend',
          sorter: (a, b) => {
            if (!a.score) {
              return 9999999
            } else if (!b.score) {
              return 9999999
            } else {
              return a.score.localeCompare(b.score)
            }
          },

          sortDirections: ['descend', 'ascend'],
          width: '10%',
          align: 'center',
        },
        {
          title: '净成绩',
          dataIndex: 'scorecj',
          sorter: (a, b) => {
            if (!a.scorecj) {
              return 9999999
            } else if (!b.scorecj) {
              return 9999999
            } else {
              return a.scorecj.localeCompare(b.scorecj)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: '10%',
          align: 'center',
        },
        // {
        //   title: '手机号',
        //   dataIndex: 'phone',
        //   // sorter: (a, b) => a.phone.localeCompare(b.phone),
        //   // sortDirections: ['descend', 'ascend'],
        //   width: '10%',
        //   align: 'center',
        // },
        // {
        //   title: '身份证号',
        //   dataIndex: 'idcard',
        //   // sorter: (a, b) => a.idcard.localeCompare(b.idcard),
        //   // sortDirections: ['descend', 'ascend'],
        //   width: '10%',
        //   align: 'center',
        // },
        {
          title: '团队',
          dataIndex: 'teams',
          align: 'center',
          // sorter: (a, b) => a.teams.localeCompare(b.teams),
          // sortDirections: ['descend', 'ascend'],
        },
        // {
        //   title: '是否检录',
        //   dataIndex: 'iscall',
        //   sorter: (a, b) => a.iscall.localeCompare(b.iscall),
        //   sortDirections: ['descend', 'ascend'],
        //   width: '5%',
        //   // placeholder: '请输入${title}',
        //   // defaultValue: '',
        // },
        {
          title: '操作',
          key: 'operation',
          fixed: 'right',
          width: 100,
          scopedSlots: { customRender: 'operation' },
        },
      ],
      columns2: [
        {
          title: '姓名',

          dataIndex: 'player',
          sorter: (a, b) => {
            if (!a.player) {
              return 9999999
            } else if (!b.player) {
              return 9999999
            } else {
              return a.player.localeCompare(b.player)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 200,
        },
        {
          title: '组别',

          dataIndex: 'groupid',
          sorter: (a, b) => {
            if (!a.groupid) {
              return 9999999
            } else if (!b.groupid) {
              return 9999999
            } else {
              return a.groupid.localeCompare(b.groupid)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 150,
          align: 'center',
        },
        {
          title: '参赛编号',

          dataIndex: 'pcode',
          sorter: (a, b) => {
            if (!a.pcode) {
              return 9999999
            } else if (!b.pcode) {
              return 9999999
            } else {
              return a.pcode.localeCompare(b.pcode)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 180,
          align: 'center',
        },
        {
          title: '开始时间',

          dataIndex: 'pstarttime',
          sorter: (a, b) => {
            if (!a.pstarttime) {
              return 9999999
            } else if (!b.pstarttime) {
              return 9999999
            } else {
              return a.pstarttime.localeCompare(b.pstarttime)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 160,
          align: 'center',
        },
        {
          title: '总圈数',

          dataIndex: 'totalring',
          sorter: (a, b) => {
            if (!a.totalring) {
              return 9999999
            } else if (!b.totalring) {
              return 9999999
            } else {
              return a.totalring.localeCompare(b.totalring)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '总成绩',

          dataIndex: 'score',
          defaultSortOrder: 'ascend',
          sorter: (a, b) => {
            if (!a.score) {
              return 9999999
            } else if (!b.score) {
              return 9999999
            } else {
              return a.score.localeCompare(b.score)
            }
          },

          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '净成绩',
          dataIndex: 'scorecj',
          sorter: (a, b) => {
            if (!a.scorecj) {
              return 9999999
            } else if (!b.scorecj) {
              return 9999999
            } else {
              return a.scorecj.localeCompare(b.scorecj)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '段成绩1',
          dataIndex: 'p1',
          sorter: (a, b) => {
            if (!a.p1) {
              return 9999999
            } else if (!b.p1) {
              return 9999999
            } else {
              return a.p1.localeCompare(b.p1)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '段成绩2',
          dataIndex: 'p2',
          sorter: (a, b) => {
            if (!a.p2) {
              return 9999999
            } else if (!b.p2) {
              return 9999999
            } else {
              return a.p2.localeCompare(b.p2)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '段成绩3',
          dataIndex: 'p3',
          sorter: (a, b) => {
            if (!a.p3) {
              return 9999999
            } else if (!b.p3) {
              return 9999999
            } else {
              return a.p3.localeCompare(b.p3)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '段成绩4',
          dataIndex: 'p4',
          sorter: (a, b) => {
            if (!a.p4) {
              return 9999999
            } else if (!b.p4) {
              return 9999999
            } else {
              return a.p4.localeCompare(b.p4)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '段成绩5',
          dataIndex: 'p5',
          sorter: (a, b) => {
            if (!a.p5) {
              return 9999999
            } else if (!b.p5) {
              return 9999999
            } else {
              return a.p5.localeCompare(b.p5)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '段成绩6',
          dataIndex: 'p6',
          sorter: (a, b) => {
            if (!a.p6) {
              return 9999999
            } else if (!b.p6) {
              return 9999999
            } else {
              return a.p6.localeCompare(b.p6)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '段成绩7',
          dataIndex: 'p7',
          sorter: (a, b) => {
            if (!a.p7) {
              return 9999999
            } else if (!b.p7) {
              return 9999999
            } else {
              return a.p7.localeCompare(b.p7)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '段成绩8',
          dataIndex: 'p8',
          sorter: (a, b) => {
            if (!a.p8) {
              return 9999999
            } else if (!b.p8) {
              return 9999999
            } else {
              return a.p3.localeCompare(b.p8)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '段成绩9',
          dataIndex: 'p9',
          sorter: (a, b) => {
            if (!a.p9) {
              return 9999999
            } else if (!b.p9) {
              return 9999999
            } else {
              return a.p9.localeCompare(b.p9)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '段成绩10',
          dataIndex: 'p10',
          sorter: (a, b) => {
            if (!a.p10) {
              return 9999999
            } else if (!b.p10) {
              return 9999999
            } else {
              return a.p10.localeCompare(b.p10)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '段成绩11',
          dataIndex: 'p11',
          sorter: (a, b) => {
            if (!a.p11) {
              return 9999999
            } else if (!b.p11) {
              return 9999999
            } else {
              return a.p11.localeCompare(b.p11)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '段成绩12',
          dataIndex: 'p12',
          sorter: (a, b) => {
            if (!a.p12) {
              return 9999999
            } else if (!b.p12) {
              return 9999999
            } else {
              return a.p12.localeCompare(b.p12)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '段成绩13',
          dataIndex: 'p13',
          sorter: (a, b) => {
            if (!a.p13) {
              return 9999999
            } else if (!b.p13) {
              return 9999999
            } else {
              return a.p13.localeCompare(b.p13)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '段成绩14',
          dataIndex: 'p14',
          sorter: (a, b) => {
            if (!a.p14) {
              return 9999999
            } else if (!b.p14) {
              return 9999999
            } else {
              return a.p14.localeCompare(b.p14)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '段成绩15',
          dataIndex: 'p15',
          sorter: (a, b) => {
            if (!a.p15) {
              return 9999999
            } else if (!b.p15) {
              return 9999999
            } else {
              return a.p15.localeCompare(b.p15)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '段成绩16',
          dataIndex: 'p16',
          sorter: (a, b) => {
            if (!a.p16) {
              return 9999999
            } else if (!b.p16) {
              return 9999999
            } else {
              return a.p16.localeCompare(b.p16)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '段成绩17',
          dataIndex: 'p17',
          sorter: (a, b) => {
            if (!a.p17) {
              return 9999999
            } else if (!b.p17) {
              return 9999999
            } else {
              return a.p17.localeCompare(b.p17)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '段成绩18',
          dataIndex: 'p18',
          sorter: (a, b) => {
            if (!a.p18) {
              return 9999999
            } else if (!b.p18) {
              return 9999999
            } else {
              return a.p18.localeCompare(b.p18)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '段成绩19',
          dataIndex: 'p19',
          sorter: (a, b) => {
            if (!a.p19) {
              return 9999999
            } else if (!b.p19) {
              return 9999999
            } else {
              return a.p19.localeCompare(b.p19)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '段成绩20',
          dataIndex: 'p20',
          sorter: (a, b) => {
            if (!a.p20) {
              return 9999999
            } else if (!b.p20) {
              return 9999999
            } else {
              return a.p20.localeCompare(b.p20)
            }
          },
          sortDirections: ['descend', 'ascend'],
          width: 120,
          align: 'center',
        },
        {
          title: '团队',
          dataIndex: 'teams',
          align: 'center',
          width: 150,
        },
        {
          title: '操作',
          key: 'operation',
          fixed: 'right',
          width: 100,
          scopedSlots: { customRender: 'operation' },
        },
      ],
      modalShowEdit: false,
      modalShowDetails: false,
      PlayerModel: {},
      playerMoel_Orign: {},
      timer: null,
    }
  },

  created() {
    this.tableHeight = window.innerHeight * 0.86
    this.matchId = this.$route.params.code
    // console.log('赛事代码', this.matchId)
  },
  mounted() {
    let that = this
    this.loadData()
    setTimeout(() => {
      this.timer = window.setInterval(() => {
        that.loadData()
      }, 3000)
    }, 3000)
  },
  beforeDestroy() {
    window.clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    moment,
    switchMore() {
      if (this.moreQueryCondition === true) {
        this.moreQueryCondition = false
        this.moreQueryConditionShow = false
      } else {
        this.moreQueryCondition = true
        this.moreQueryConditionShow = true
      }
    },
    loadData() {
      this.$http.get('/matchplayer/list?matchId=' + this.matchId).then((res) => {
        this.data = res.result
        if (this.data && this.data.length > 0) {
          this.data.forEach((item, index) => {
            item['key'] = index
          })
        }
        this.data_origin = this.data
        //this.initWebSocket()
      })
     
    },
    onSubmit() {
      this.data = JSON.parse(JSON.stringify(this.data_origin))
      let queryFilterModel = this.$refs.frmMatchQuery.model
      if (queryFilterModel.name) {
        this.data = this.data.filter((x) => x.player.indexOf(queryFilterModel.name) >= 0)
      }
      if (queryFilterModel.group) {
        this.data = this.data.filter((x) => x.groupid.toUpperCase().indexOf(queryFilterModel.group.toUpperCase()) >= 0)
      }
      if (queryFilterModel.pcode) {
        this.data = this.data.filter((x) => x.pcode.toUpperCase().indexOf(queryFilterModel.pcode.toUpperCase()) >= 0)
      }
      if (queryFilterModel.score) {
        this.data = this.data.filter((x) => x.score.indexOf(queryFilterModel.score) >= 0)
      }
      // if (queryFilterModel.iscall) {
      //   this.data = this.data.filter((x) => x.iscall.indexOf(queryFilterModel.iscall) >= 0)
      // }
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current && current < moment().endOf('day')
    },

    disabledDateTime() {
      return {
        disabledHours: () => this.range(0, 24).splice(4, 20),
        disabledMinutes: () => this.range(30, 60),
        disabledSeconds: () => [55, 56],
      }
    },
    resetForm() {
      this.$refs.frmMatchQuery.resetFields()
      this.$refs.frmMatchQuery.model.name = ''
      this.$refs.frmMatchQuery.model.group = ''
      this.$refs.frmMatchQuery.model.pcode = ''
      this.$refs.frmMatchQuery.model.score = ''
      //this.$refs.frmMatchQuery.model.iscall = ''
      this.data = this.data_origin
    },
    setModalEditVisible(modalShowEdit) {
      this.modalShowEdit = modalShowEdit
    },
    setModalDetailsVisible(modalShowDetails) {
      this.modalShowDetails = modalShowDetails
    },
    onSubmitSave(e) {
      debugger
      let that = this
      this.$http.post('/matchplayer/save', this.PlayerModel).then((res) => {
        if (res.success) {
        } else {
          let item = that.data.filter((o) => {
            return that.PlayerModel.id === o.id
          })
          if (item.length > 0) {
            for (let key in item[0]) {
              item[0][key] = that.playerMoel_Orign[key]
            }
          }
        }
      })
      this.setModalEditVisible(false)
    },
    handlerRowClick(row, type) {
      this.PlayerModel = row
      this.playerMoel_Orign = JSON.parse(JSON.stringify(row))

      if (type === 'edit') {
        this.setModalEditVisible(true)
      } else if (type === 'details') {
        this.setModalDetailsVisible(true)
      }
    },
    onChangePicker(e) {
      this.PlayerModel.pstarttime = e
    },
    switchHandler() {
      let that = this
      this.$nextTick(() => {
        if (that.duanchengji === false) {
          that.duanchengji = true
          that.columns = that.columns2
        } else {
          that.duanchengji = false
          that.columns = that.columns1
        }
      })
    },
    initWebSocket: function () {
      // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
      var userId = store.getters.userInfo.id
      var url = window._CONFIG['domianURL'].replace('https://', 'wss://').replace('http://', 'ws://') + 'mqtt/' + userId
      //console.log(url);
      //update-begin-author:taoyan date:2022-4-22 for:  v2.4.6 的 websocket 服务端，存在性能和安全问题。 #3278
      let token = Vue.ls.get(ACCESS_TOKEN)
      this.websock = new WebSocket(url, [token])
      console.log('url', url)
      console.log('userId', userId)
      console.log('token', token)
      //update-end-author:taoyan date:2022-4-22 for:  v2.4.6 的 websocket 服务端，存在性能和安全问题。 #3278
      this.websock.onopen = this.websocketOnopen
      this.websock.onerror = this.websocketOnerror
      this.websock.onmessage = this.websocketOnmessage
      this.websock.onclose = this.websocketOnclose
    },
    websocketOnopen: function () {
      console.log('Mqtt连接成功')
    },
    websocketOnerror: function (e) {
      console.log('WebSocket连接发生错误，第%s次', this.wsConnectErrorTime)

      this.wsConnectErrorTime = this.wsConnectErrorTime + 1
      if (this.wsConnectErrorTime > 5) {
        console.log('WebSocket连接错误超过5次，就不再重新连了！')
        this.lockReconnect = true
        return
      }

      this.reconnect()
    },
    websocketOnmessage: function (e) {
      var data = eval('(' + e.data + ')') //解析对象
      console.log('-----接收消息-------', data)
      if (data.success) {
        let reslutItem = this.data_origin.filter((o) => {
          return o.id === data.result.id
        })

        if (reslutItem.length > 0) {
          for (let key in reslutItem[0]) {
            if (data.result[key]) {
              reslutItem[0][key] = data.result[key]
            }
          }
        }
      }
    },
    websocketOnclose: function (e) {
      if (this.websock != null) {
        this.websock.close()
        console.log('connection closed (' + e + ')')
        if (e) {
          console.log('connection closed (' + e.code + ')')
        }
        //this.reconnect();
      }
    },
    websocketSend(text) {
      // 数据发送
      try {
        this.websock.send(text)
      } catch (err) {
        console.log('send failed (' + err.code + ')')
      }
    },
    reconnect() {
      var that = this
      if (that.lockReconnect) return
      that.lockReconnect = true
      //没连接上会一直重连，设置延迟避免请求过多
      setTimeout(function () {
        console.info('尝试重连...')
        that.initWebSocket()
        that.lockReconnect = false
      }, 20000)
    },
  },
}
</script>

<style scoped>
#components-layout-demo-basic .ant-layout-header,
#components-layout-demo-basic .ant-layout-footer {
  background: transparent;
  color: #fff;
}
#components-layout-demo-basic .ant-layout-footer {
  line-height: 1.5;
}

#components-layout-demo-basic .ant-layout-content {
  /* background: rgba(16, 142, 233, 1); */
  color: #fff;
  min-height: 120px;
  line-height: 120px;
  margin: 20px;
}
#components-layout-demo-basic > .ant-layout {
  margin-bottom: 48px;
}
#components-layout-demo-basic > .ant-layout:last-child {
  margin: 0;
}
.ant-calendar-picker {
  width: 100%;
}
.btn_inline {
  display: inline;
}
.switchQuery {
  display: inline-block;
  vertical-align: bottom;
  padding: 10px;
  margin-right: 10px;
}
</style>